<template>
  <div>
    <el-container>
      <el-main>
        <el-row class="bg-purple" >
          <el-col :offset="4" :span="16" >
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-select v-model="formInline.city" placeholder="城市">
                  <el-option label="成都" value="成都"></el-option>
                  <el-option label="天堂" value="天堂"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="入住时间"
                    end-placeholder="退房时间"
                  ></el-date-picker>
                </div>
              </el-form-item>
              <el-form-item>
                <el-input v-model="formInline.keyword" placeholder="酒店名称" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row class="bg-purple-dark">
          <el-card>
            <el-col :offset="4" :span="16" class="bg-purple-light">
              <el-row justify="start" class="bg-purple-dark">
                <el-col>
                  <b>位置区域</b>
                  <el-radio-group v-model="district" size="mini">
                    <el-radio-button
                      v-for="district in districts"
                      :label="district"
                      :key="district"
                    ></el-radio-button>
                    <el-radio-button value>无</el-radio-button>
                  </el-radio-group>
                </el-col>
              </el-row>
              <el-row>
                <el-form :inline="true">
                  <b>星级价格</b>
                  <el-form-item>
                    <el-checkbox-group v-model="starList">
                      <el-checkbox-button label="5">五星级</el-checkbox-button>
                      <el-checkbox-button label="4">四星级</el-checkbox-button>
                      <el-checkbox-button label="3">三星级</el-checkbox-button>
                      <el-checkbox-button label="2">二星级</el-checkbox-button>
                      <el-checkbox-button label="1">一星级</el-checkbox-button>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item>
                    <el-radio-group v-model="msg">
                      <el-radio-button :label="price" v-for="price in prices" :key="price"></el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item>
                    <el-input type="number" v-model.number="min_price" placeholder="最低价格下限">
                      <template slot="prepend">￥</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item>-</el-form-item>
                  <el-form-item>
                    <el-input type="number" v-model.number="max_price" placeholder="最低价格上限">
                      <template slot="prepend">￥</template>
                    </el-input>
                  </el-form-item>
                  <el-button type="primary" @click="distanceSearch">附近搜索</el-button>
                </el-form>
              </el-row>
              <el-row>
                <b>高级筛选</b>
                <el-select size="mini" v-model="rate" clearable placeholder="评分">
                  <el-option
                    v-for="item in rate_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-select size="mini" v-model="min_comment_amount" clearable placeholder="点评数量">
                  <el-option
                    v-for="item in mca_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-select size="mini" v-model="breakfast" clearable placeholder="早餐">
                  <el-option
                    v-for="item in breakfast_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-select size="mini" v-model="room_type" clearable placeholder="房型">
                  <el-option
                    v-for="item in rt_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-row>
            </el-col>
          </el-card>
        </el-row>
        <el-row class="bg-purple">
          <el-col :offset="4" :span="10" class="bg-purple-light">
            <el-row v-for="hotel in hotels" :key="hotel.id">
              <el-card shadow="hover">
                <el-col :span="6" class="bg-purple">
                  <el-image style="width: 180px; height: 180px" :src="hotel.previewUrl"></el-image>
                </el-col>
                <el-col :span="10" class="bg-purple-dark">
                  <el-row justify="left">
                    <h3>{{ hotel.name }}</h3>
                    <el-rate v-model="hotel.star"></el-rate>
                    {{ hotel.address }}
                  </el-row>
                </el-col>
                <el-col :span="8" class="bg-purple">
                  <el-row class="bg-purple-light">
                    <h3>
                      <p class="rate">{{ rateDescribe(hotel.rate) }} {{ hotel.rate }}</p>
                    </h3>
                    <div class="smallgray">{{ hotel.commentNum }}条点评</div>
                  </el-row>
                  <el-row class="bg-purple-dark">
                    <del>￥{{ 3 * hotel.price }}</del>
                    <h2>
                      <p class="price">￥{{ hotel.price }}</p>
                    </h2>起
                  </el-row>
                  <el-row justify="end">
                    <el-col :hidden="showDistance">{{ hotel.distance }}米</el-col>
                    <el-col>
                      <el-button type="primary" @click="toHotelRooms(hotel.id)">查看详情</el-button>
                    </el-col>
                  </el-row>
                </el-col>
              </el-card>
            </el-row>
          </el-col>
          <el-col :span="6">
            <div style="width: 300px;height: 300px;position: fixed;" id="map-container"></div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'HotelSearch',
  data() {
    return {
      lat:30.7820165,
      lng:103.8532754,
      showDistance: false,
      map: null,
      markers: [{
        title: "Example",
        lat: 30.79589,
        lng: 103.90256,
      },
      {
        title: "100.00",
        lat: 30.99589,
        lng: 103.80256,
      }],
      formInline: {
        city: '成都',
        keyword: null
      },
      date: '',
      city: '成都',
      districts: [
        '双流区', '成华区', '新津区', '新都区', '武侯区', '温江区', '郫都区', '金牛区', '锦江区', '青白江区', '青羊区', '龙泉驿区'
      ],
      district: null,
      starList: [],
      stars: null,
      rate_options: [{
        value: 4.8,
        label: '4.8分以上'
      }, {
        value: 4.5,
        label: '4.5分以上'
      }, {
        value: 4.0,
        label: '4.0分以上'
      }, {
        value: 3.5,
        label: '3.5分以上'
      }],
      mca_options: [{
        value: 200,
        label: '200条以上'
      }, {
        value: 100,
        label: '100条以上'
      }, {
        value: 50,
        label: '50条以上'
      }, {
        value: 10,
        label: '10条以上'
      }],
      breakfast_options: [{
        value: 0,
        label: '不含早餐'
      }, {
        value: 1,
        label: '含早餐'
      }],
      rt_options: [{
        value: 1,
        label: '双床房'
      }, {
        value: 2,
        label: '多床房'
      }, {
        value: 3,
        label: '大床房'
      }, {
        value: 4,
        label: '单人床房'
      }],
      rate: null,
      min_comment_amount: null,
      breakfast: null,
      room_type: null,
      priceRange: {
        min: 0,
        max: 600,
        divide: 4
      },
      prices: [
        '0-150', '150-300', '300-450', '450-600', '600-9999'
      ],
      min_price: null,
      max_price: null,
      expr: /([0-9]*)-([0-9]*)/i,
      hotels: [{
        id: 1297,
        name: '成都泰逸酒店',
        lat: 30.772736,
        lng: 104.5373,
        star: 4,
        address: 'No. 15, Section 1, Ren Min Zhong Road',
        previewUrl: 'http://pix4.agoda.net/hotelimages/1297/0/bd87a86dccd8e39d308ef076bbcc4b23.jpg?s=312x',
        pricemin: 150,
        rate: 4.5,
        commentnum: 3000
      }, {
        id: 1290,
        name: '成都泰逸酒店1',
        lat: 30.772736,
        lng: 104.5373,
        star: 5,
        address: 'No. 15, Section 1, Ren Min Zhong Road',
        previewUrl: 'http://pix4.agoda.net/hotelimages/1297/0/bd87a86dccd8e39d308ef076bbcc4b23.jpg?s=312x',
        pricemin: 250,
        rate: 4.3,
        commentnum: 3003
      }]
    }
  },
  computed: {
    // 根据最大值和最小值获取价格分布区间
    // msg用来收到min_price和max_price并且利用正则表达式拆出来转换为Number型
    msg: {
      get() {
        return `${this.min_price}-${this.max_price}`
      },
      set(val) {
        this.min_price = parseFloat(this.expr.exec(val)[1])
        this.max_price = parseFloat(this.expr.exec(val)[2])
      }
    }
  },
  methods: {
    search: function () {
      var self = this;
      if (self.starList.length != 0) {
        self.stars = self.starList.map(Number);
      }
      console.log("search");
      axios({
        method: 'post',
        url: '/api/hotel/search/filter',
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
        data: JSON.stringify({
          cityName: self.city,
          keyword: self.formInline.keyword,
          lng: null,
          lat: null,
          stars: self.stars,
          ppricemin: self.min_price,
          pricemax: self.max_price,
          ratemin: self.rate,
          commentNum: self.min_comment_amount
        })
      }).then(function (res) {
        console.log(res.data.data);
        self.hotels = res.data.data;
        for (var i = 0; i < self.hotels.length; i++) {
          console.log(self.hotels[i].previewUrl);
          var url = self.hotels[i].previewUrl.split('，')[0];
          self.hotels[i].previewUrl = url;
        }
        for (var i = 0; i < self.hotels.length; i++) {
          self.markers.push({ title: self.hotels[i].price, lat: self.hotels[i].lat, lng: self.hotels[i].lng });
        }
        self.refreshMarkers();
      });
    },
    distanceSearch: function (lat,lng) {
      var self = this;
      if (self.starList.length != 0) {
        self.stars = self.starList.map(Number);
      }
      console.log("search");
      axios({
        method: 'get',
        url: '/api/hotel/search/position',
        params: {
          lng: self.lng,
          lat: self.lat
        }
      }).then(function (res) {
        console.log(res.data.data);
        self.hotels = res.data.data;
        for (var i = 0; i < self.hotels.length; i++) {
          console.log(self.hotels[i].previewUrl);
          var url = self.hotels[i].previewUrl.split('，')[0];
          self.hotels[i].previewUrl = url;
        }
        for (var i = 0; i < self.hotels.length; i++) {
          self.markers.push({ title: self.hotels[i].price, lat: self.hotels[i].lat, lng: self.hotels[i].lng });
        }
        self.refreshMarkers();
      });
    },
    rateDescribe: function (rate) {
      if (rate >= 4.9) return '超级棒'
      else if (rate >= 4.8) return '棒'
      else if (rate >= 4.7) return '很好'
      else if (rate >= 4.6) return '好'
      else if (rate >= 4.5) return '不错'
      else return ''
    },
    toHotelRooms: function (id) {
      // 跳转到酒店详情
      this.$router.push({
        name: 'room',
        params: {
          id: id
        }
      })
    },
    refreshMarkers: function () {
      for (var i = 0; i < this.markers.length; i++) {
        this.map.add(new AMap.Marker({
          title: this.markers[i].title,
          position: [this.markers[i].lng, this.markers[i].lat]
        }))
      }
      this.map.setFitView()
    }
  },
  async mounted() {
    axios.defaults.baseURL = "http://localhost:8080"
    this.search();
    this.map = new AMap.Map('map-container', {
      resizeEnable: true,
      zoom: 15
    })
    this.refreshMarkers()
  }
}
</script>

<style scoped>
p.rate {
  color: #409eff;
}

p.price {
  color: #409eff;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.smallgray {
  font-size: small;
  color: gray;
}
#map-container {
  width: 100%;
  height: 100%;
}
</style>
